<template>
	<el-scrollbar>
		<div class="madp-home">
			<div class="madp-home-left">
				<div class="madp-data">
					<div class="madp-data-statistics madp-data-common">
						<div class="madp-data-common-title">数据总览</div>
						<div class="madp-data-box">
							<statistics-card :cardInfo="statisticsCardInfo" :cardData="basicInfo" />
						</div>
					</div>
					<div class="madp-data-realtime madp-data-common">
						<div class="madp-real-top">
							<div class>
								<span class="madp-data-common-title">实时数据</span>
								<span class="madp-last-time">更新于:{{ lastTime }}</span>
							</div>
							<div>
								<el-button-group>
									<el-button :type="dateType === 1 ? 'primary' : 'default'" @click="onChangeDateType(1)">今日</el-button>
									<el-button :type="dateType === 2 ? 'primary' : 'default'" @click="onChangeDateType(2)">本周</el-button>
									<el-button :type="dateType === 3 ? 'primary' : 'default'" @click="onChangeDateType(3)">本月</el-button>
									<el-button icon="el-icon-refresh" @click="onRefresh"></el-button>
								</el-button-group>
							</div>
						</div>
						<div class="madp-data-box">
							<statistics-card :cardInfo="realTimeCardInfo" :cardData="basicInfo" />
						</div>
					</div>
					<div class="madp-data-echart">
						<div class="madp-data-echart-left">
							<div id="leftChart"></div>
						</div>
						<div class="madp-data-echart-right">
							<div id="rightChart"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="madp-home-right">
				<div class="madp-home-right-user" :style="{ background: theme }">
					<div class="madp-user-avatar">
						<img v-if="userInfo.avatar" :src="userInfo.avatar" />
						<img v-else src="/img/user.png" alt="" />
					</div>
					<div class="madp-user-wel">
						<span class="madp-user-wel-name">{{ userInfo.name }}，</span>
						<span class="madp-user-wel-text">欢迎登录本系统</span>
					</div>
					<div class="madp-login-time">所在部门:{{ userInfo.deptName }}</div>
					<div class="madp-login-time">账号角色:{{ userInfo.roleNames ? userInfo.roleNames.join(',') : '' }}</div>
					<div class="madp-login-time">登录时间:{{ time }}</div>
				</div>
				<!-- <div class="madp-home-right-tips">
                    <div class="madp-home-right-tips-title">
                        <div>
                            <i class="el-icon-s-claim" />待办事项
                        </div>
                        <span class="madp-to-more">更多</span>
                    </div>
                    <div class="madp-home-right-tips-content">
                        <div v-for="(item, index) in tipsData" :key="index" class="madp-tips-item">
                            <span class="madp-tips-item-text">
                                {{
                                item.text
                                }}
                            </span>
                            <span class="madp-tips-item-time">
                                {{
                                item.time
                                }}
                            </span>
                        </div>
                    </div>
                </div> -->
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex';
import { dateFormat } from '@/util/date';
import StatisticsCard from '@/components/statistics-card/';
import { queryHomeInfo } from '@/api/login';

export default {
	data() {
		return {
			time: '',
			statisticsCardInfo: [
				{
					label: '企业成员总数',
					key: 'totalEmployee',
					// color: '#FFD700',
				},
				{
					label: '客户总人数',
					key: 'totalEmployeeContact',
					// color: '#FF8C00',
				},
				{
					label: '客户群总数',
					key: 'totalRoom',
					// color: '#90EE90',
				},
				{
					label: '群成员总数',
					key: 'totalRoomContact',
					// color: '#00CED1',
				},
			],
			realTimeCardInfo: [
				{
					label: '群聊天总条数',
					key: 'msgNum',
					// color: '#FFD700',
				},
				{
					label: '新增客户数',
					key: 'addContact',
					// color: '#FF8C00',
				},
				{
					label: '群新增人数',
					key: 'addRoomContact',
					// color: '#90EE90',
				},
				{
					label: '流失客户数',
					key: 'lossEmployeeContact',
					// color: '#00CED1',
				},
			],
			basicInfo: {},
			dateType: 2,
			lastTime: dateFormat(new Date()),
			leftChart: [],
			rightChart: [],
			tipsData: [
				// { text: "下半年工作计划", time: "08-22" },
				// { text: "客户张XX生日", time: "08-26" },
				// { text: "北京同行峰会", time: "08-28" }
			],
		};
	},
	components: {
		StatisticsCard,
	},
	computed: {
		...mapGetters(['theme', 'userInfo', 'loginTime']),
	},
	watch: {
		dateType(newVal, oldVal) {
			switch (newVal) {
				case 1:
					this.realTimeInfo = {
						applyNum: 5,
						newAddCstNum: 4,
						newAddGroupMember: 6,
						newLossCstNum: 3,
					};
					break;
				case 2:
					this.realTimeInfo = {
						applyNum: 24,
						newAddCstNum: 24,
						newAddGroupMember: 36,
						newLossCstNum: 16,
					};
					break;
				case 3:
					this.realTimeInfo = {
						applyNum: 126,
						newAddCstNum: 112,
						newAddGroupMember: 165,
						newLossCstNum: 34,
					};
					break;
				default:
					break;
			}
		},
	},
	mounted() {
		this.getHomeInfo();
		this.time = dateFormat(new Date(this.loginTime));
	},
	methods: {
		getHomeInfo() {
			const params = {
				type: this.dateType,
			};
			queryHomeInfo(params).then((res) => {
				if (res.data && res.data.code === 0) {
					this.basicInfo = res.data.data;
					this.leftChart = this.basicInfo.dates.map((item, index) => {
						return {
							time: item,
							number: this.basicInfo.addEmployeeContacts[index],
						};
					});
					this.rightChart = this.basicInfo.dates.map((item, index) => {
						return {
							time: item,
							number: this.basicInfo.lossEmployeeContacts[index],
						};
					});
					this.setEchartsFn('leftChart');
					this.setEchartsFn('rightChart');
				}
			});
		},
		onChangeDateType(type) {
			this.dateType = type;
			this.getHomeInfo();
		},
		getDate(n) {
			return dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 24 * n)).slice(0, 10);
		},
		onRefresh(e) {
			let target = e.target;
			if (e.target.nodeName === 'I') {
				target = e.target.parentNode;
			}
			target.blur();
			this.getHomeInfo();
		},
		// 折线图配置
		setEchartsFn(chartType) {
			let xAxisData = [];
			let seriesData = [];
			const title = chartType === 'leftChart' ? '新增客户数' : '流失客户数';
			const options = {
				title: {
					text: title,
					left: '40%',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为:'line' | 'shadow'
					},
					formatter: '{b}<br>客户总数: {c}人',
				},
				xAxis: {
					type: 'category',
					data: [],
				},
				yAxis: {
					name: '人数',
					type: 'value',
				},
				series: [
					{
						name: '客户总数',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#ED5555',
						},
						itemStyle: {
							color: '#ED5555',
						},
					},
				],
			};
			this[chartType].forEach((item) => {
				xAxisData.push(item.time);
				seriesData.push(item.number);
			});
			options.xAxis.data = xAxisData;
			options.series[0].data = seriesData;
			let unit = '条';
			options.tooltip.formatter = `{b}<br>${title}: {c}${unit}`;

			let echarts = require('echarts');

			// 绘制图表
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById(chartType));
			myChart.setOption(options);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.madp-home {
	padding: 16px;
	padding-top: 6px;
	display: flex;
	justify-content: space-between;
	&-left,
	&-right {
		min-height: 200px;
	}
	&-left {
		width: calc(100% - 300px);
		.madp-data {
			&-common {
				margin-top: 10px;
				padding: 16px 10px;
				background: #fff;
				border-radius: 5px;
			}
			&-statistics {
				margin-top: 0;
			}
			&-realtime {
				.madp-real-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.madp-last-time {
						margin-left: 5px;
						font-size: 12px;
						color: #999;
					}
				}
			}
			&-echart {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				&-left,
				&-right {
					width: 49%;
					background: #fff;
					border-radius: 5px;
				}
				&-left #leftChart,
				&-right #rightChart {
					padding-top: 20px;
					width: 100%;
					height: 400px;
					box-sizing: border-box;
				}
			}
		}
	}
	&-right {
		width: 280px;
		border-radius: 5px;
		background: #fff;
		&-user {
			height: fit-content;
			color: #fff;
			border-radius: 8px;
			opacity: 0.8;
			padding: 20px 16px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.madp-user-avatar {
				width: 96px;
				height: 96px;
				border-radius: 50%;
				overflow: hidden;
				img {
					width: 100%;
				}

				&:hover {
					animation: madp-user-avatar 59s cubic-bezier(0.34, 0, 0.84, 1) 1s infinite;
				}

				@keyframes madp-user-avatar {
					0% {
						transform: rotate(0);
					}
					100% {
						transform: rotate(666turn);
					}
				}
			}
			.madp-user-wel,
			.madp-login-time {
				line-height: 32px;
			}
			.madp-user-wel {
				&-name {
					font-size: 18px;
					font-weight: bold;
				}
				&-text {
					font-size: 16px;
				}
			}
			.madp-login-time {
				font-size: 12px;
			}
		}
		&-tips {
			padding: 16px;
			&-title {
				font-size: 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.madp-to-more {
					font-size: 12px;
					cursor: pointer;
				}
			}
			&-content {
				margin-top: 10px;
				.madp-tips-item {
					font-size: 12px;
					line-height: 28px;
					display: flex;
					justify-content: space-between;
					&-text {
						color: #333;
					}
					&-time {
						color: #999;
					}
				}
			}
		}
	}
}
.madp-data-common-title {
	font-size: 16px;
	font-weight: bold;
}
.madp-data-box {
	margin-top: -20px;
}
</style>
